xiangcunwang_web/pages/xiangcunshangcheng/[dir]/index.html.vue

<template>
    <ShopPageHead></ShopPageHead>
    <main class="index_main" id="all_vue">
        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
        <!--子菜单和地区选择--> 
        <ShopSubMenu2></ShopSubMenu2>
        <!-- 地区选择 -->
 
        <div class="breadcrumb_box pc_none">
            
                <span class=" ">当前位置：</span>
 
                <NuxtLink
                    :to="`/xiangcunshangcheng/index.html`"
                    class=" "
                    >
                    乡村商城
                </NuxtLink>
                <span class=" ">&gt;</span>

                <span class=" "> {{name}}</span>


        </div>

        <div class="categ_crumb_box clearfix_2">

            <!-- 当前位置 -->
            <div class="categ_crumb_left phone_none">
                <span class="categ_crumb_left_a" title=""> 当前位置：</span>
                <NuxtLink
                    :to="`/xiangcunshangcheng/index.html`"
                    class="categ_crumb_left_a"
                >
                    乡村商城
                </NuxtLink>
                &gt;
                <span class="categ_crumb_left_text">{{name}}</span>
            </div>
            <!-- 当前位置 -->

            <!-- 当前商品所在地 pc-->
            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">

                <div class="categ_crumb_right_text">
                      当前商品所在地：
                </div>

                <div class="categ_crumb_right_text hand">{{cityName}}</div>
                <div class="categ_crumb_right_btn back100 hand" 
                    @click="btn_if_categ_crumb_panel_fun" 
                    @blur="categ_crumb_panel_btn_blur_fun"
                    tabindex="1"
                    >
                </div>
            </div>
            <!-- 当前商品所在地 pc-->
            <div class="categ_crumb_panel pc_categ_crumb_panel_none"
            
                 v-show="if_categ_crumb_panel" tabindex="0"
                @click="categ_crumb_panel_focus_fun"
                 @blur="categ_crumb_panel_blur_fun" >

                <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
                <div class="categ_crumb_panel_btn_box clearfix">
                    <span 
                        class="categ_crumb_panel_btn hand"
                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
                        v-for="item in cityList"
                        @click="chooseCity(item.id)">
                        {{ item.name }}
                    </span>
                </div>
            </div>

            <div class="phone_categ_crumb_out pc_none">
 
                 <div class="categ_crumb_city" v-if="cityList.length > 0">

                    <div class="categ_crumb_right_text">
                         所在地 :  
                    </div> 
                    <div class="categ_crumb_right_text hand">{{cityName}}</div>

                    <div 
                        class="categ_crumb_right_btn back100" 
                        :class="{categ_crumb_right_btn_pull: if_categ_crumb_panel }" 

                        @click="btn_if_categ_crumb_panel_fun" 
                        @blur="categ_crumb_panel_btn_blur_fun"
                        tabindex="1"
                        >
                    </div>

                    <div class="phone_categ_crumb_city_panel" v-show="if_categ_crumb_panel" tabindex="0">

                         
                        <span class="phone_categ_crumb_city_panel_span " 
                            :class="{ phone_categ_crumb_city_panel_span_only: item.id == chooseCityId }"

                            v-for="item in cityList"
                            @click="chooseCity(item.id)"
                        >
                            {{ item.name }} 
                        </span>

                    </div>

                 </div>   
 
                 <div class="phone_categ_crumb_zone" v-if="secondNav.length > 0">
                        <!-- hh -->
                       <div class="phone_categ_crumb_zone_text"> 详细分类: </div> 

                        <div class="phone_categ_crumb_zone_btn back100"
                            :class="{phone_categ_crumb_zone_btn_pull: if_categ_crumb_panel_2 }"      
                            @click="btn_if_categ_crumb_panel_fun_2" 
                            @blur="categ_crumb_panel_btn_blur_fun_2"
                            tabindex="1"
                        >
                    
                        </div>

                        <div class="phone_categ_crumb_zone_panel"
                             v-show="if_categ_crumb_panel_2" tabindex="0"   
                        >


                            <span class="phone_categ_crumb_zone_panel_span"
                                v-if="secondNav.length ==0">
                                无
                            </span>

                             <!-- phone_categ_crumb_zone_panel_span_only -->
                            <span class="phone_categ_crumb_zone_panel_span" 
                                :class="{phone_categ_crumb_zone_panel_span_only: selectedSecondId == item.category_id}"

                                v-for="item in secondNav"
                                @click="selectSecond(item)"
                            >
                             
                                {{ item.alias }}
                            </span>

                        </div>

                 </div>


            </div>


        </div>

        <!-- 您可以选择以下详细地区 -->
        <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
            
            <div class="categ_grey_head">您可以选择以下详细分类：</div>

            <div class="categ_grey_ul clearfix">
                <span 
                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
                    v-for="item in secondNav"
                    @click="selectSecond(item)"
                >
                    {{ item.alias }}
                </span>
            </div>

        </div>
        <!-- 您可以选择以下详细地区 -->
        <!-- 供应信息列表 -->
        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
        <div class=" clearfix">
            <div class="categ_1_index clearfix">
                <div class="categ_head_box clearfix_2">
                    <span class="categ_head_a">供应信息列表</span>
                    <span class="categ_head_a_more" @click="pageShopList(1)" v-if="pageDataType1.length != 0">
                        查看更多 &gt;
                    </span>
                </div>
                <div class="categ_table clearfix">
                    <div class="categ_table_head_box">
                        <div class="categ_table_td_1">产品图片</div>
                        <div class="categ_table_td_2">供求信息/公司</div>
                        <div class="categ_table_td_3">发布时间</div>
                        <div class="categ_table_td_4">地区</div>
                    </div>
                    <ShopNoData v-if="pageDataType1.length == 0" :pagetype="'class'"></ShopNoData>
                    <div class="categ_table_li" v-for="item in pageDataType1" :key="item.id">
                        <NuxtLink
                            :to="getShopPathDetail1(item)"
                            class="categ_table_li_a"
                            :title="item.name"
                        >
                            <div class="categ_table_td_1">
                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
                            </div>
                            <div class="search_table_td_2 ">
                                <div class="search_table_td_2_in clearfix">
                                    <div class="search_table_td_2_head dot1">
                                        {{ item.name }}
                                    </div>
                                    <div class="search_table_td_2_dot3 dot2" v-if="item.com!=''&&item.com!= null">
                                        {{item.com}}
                                    </div>
                                    <div class="search_table_td_2_dot2 dot2">
                                        {{ item.description }}
                                    </div>
                                </div>
                            </div>
                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
        <div class=" clearfix">
            <div class="categ_1_index clearfix">
                <div class="categ_head_box clearfix_2">
                    <span class="categ_head_a">求购信息列表</span>
                    <span class="categ_head_a_more" @click="pageShopList(2)" v-if="pageDataType2.length != 0">
                        查看更多 &gt;
                    </span>
                </div>
                <div class="categ_table clearfix">
                    <div class="categ_table_head_box">
                        <div class="categ_table_td_1">产品图片</div>
                        <div class="categ_table_td_2">供求信息/公司</div>
                        <div class="categ_table_td_3">发布时间</div>
                        <div class="categ_table_td_4">地区</div>
                    </div>
                    <ShopNoData v-if="pageDataType2.length == 0" :pagetype="'class'"></ShopNoData>
                    <div class="categ_table_li" v-for="item in pageDataType2" :key="item.id">
                        <NuxtLink
                            :to="getShopPathDetail1(item)"
                            class="categ_table_li_a"
                            :title="item.name"
                        >
                            <div class="categ_table_td_1">
                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
                            </div>
                            <div class="search_table_td_2 ">
                                <div class="search_table_td_2_in clearfix">
                                    <div class="search_table_td_2_head dot1">
                                        {{ item.name }}
                                    </div>
                                    <div class="search_table_td_2_dot3 dot2" v-if="item.com!=''&&item.com!= null">
                                        {{item.com}}
                                    </div>
                                    <div class="search_table_td_2_dot2 dot2">
                                        {{ item.description }}
                                    </div>
                                </div>
                            </div>
                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
        <ShopHotNews></ShopHotNews>
    </main>
    <!-- 页面底部 -->
    <HomeFoot></HomeFoot>
</template>
<script setup>
 
const global_panel_num = useState('global_panel_num')



//1.页面必备方法 start ---------------------------------------->
import { ref, onMounted,watch } from 'vue'
import { ElMessage } from 'element-plus'
//1.页面必备方法 end ---------------------------------------->

//2.页面路径 start ---------------------------------------->
//2.1 获得页面数据id
const route = useRoute();
const router = useRouter()
let articleId = 0; //把路径转换为数据id
const targetSegment = getRoutePath(2);//返回第二层的路径id
const targetRoute = getRoutePath(1);//返回第一层的路径id
const alltargetRoute = targetRoute + "/" + targetSegment;
console.log(alltargetRoute)

//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        //'pinyin': targetSegment,
        'pinyin': alltargetRoute,
    },
});
if(getRouteId.code == 200){
    articleId = getRouteId.data.category_id
}else{
    console.log("错误位置：获得页面路径")
}

//2.2 生成面包屑导航 
const name = ref('') //当前频道名称
let getPageName = async () => {
    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
        method: 'GET',
        query: {
            'catid': articleId
        },
    });
    if (pageName.code == 200) {
        name.value = pageName.data.alias
    } else {
        console.log("错误位置：获取当前频道名称", pageName.message)
    }
}
getPageName();

//2.3 获得子栏目列表
const secondNav = ref([]);
const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
let getSecondNav = async () => {
    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': articleId,
            'num': 50,
        },
    });
    if (listData.code == 200) {
        secondNav.value = listData.data
        console.log(secondNav.value)
    } else {
        console.log("错误位置：获得子级栏目列表")
    }
}
getSecondNav();


//2.4 获得cityid
const cityId = ref(route.query.cityid)
//2.页面路径 end ---------------------------------------->

//3.选择商品所在地 start ---------------------------------------->
//3.1 弹出下拉框
const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
}
 
const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
    setTimeout(() => {
        if (if_categ_crumb_panel_click.value == true) {
            //点击在下拉panel内
        } else {
            //没点击在下拉panel内
            if_categ_crumb_panel.value = false
        }
    }, 100);
}
//3.2 点击下拉panel
const categ_crumb_panel_focus_fun = () => {
    if_categ_crumb_panel_click.value = true
    if_categ_crumb_panel.value = true
}
//3.3 下拉panel失去焦点事件
const categ_crumb_panel_blur_fun = () => {
    if_categ_crumb_panel_click.value = false
    if_categ_crumb_panel.value = false
}



//3.1 弹出下拉框-详细分类-phone
const if_categ_crumb_panel_2 = ref(false)//当前商品所在地下拉板
const if_categ_crumb_panel_click_2 = ref(false)//判断是否点击在下拉板内
const btn_if_categ_crumb_panel_fun_2 = () => {//点击下拉btn
    if_categ_crumb_panel_2.value = !if_categ_crumb_panel_2.value
}
 
const categ_crumb_panel_btn_blur_fun_2 = () => {//btn失去焦点事件
    setTimeout(() => {
        if (if_categ_crumb_panel_click_2.value == true) {
            //点击在下拉panel内
        } else {
            //没点击在下拉panel内
            if_categ_crumb_panel_2.value = false
        }
    }, 100);
}
//3.2 点击下拉panel
const categ_crumb_panel_focus_fun_2 = () => {
    if_categ_crumb_panel_click_2.value = true
    if_categ_crumb_panel_2.value = true
}
//3.3 下拉panel失去焦点事件
const categ_crumb_panel_blur_fun_2 = () => {
    if_categ_crumb_panel_click_2.value = false
    if_categ_crumb_panel_2.value = false
}





//3.4 获得详细地址列表
const cityName = ref('')
const cityList = ref([])
const chooseCityId = ref('')
let getCityList = async (id) => {
    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    if(shengData.code==200){
        cityList.value = shengData.data;
        cityName.value = shengData.data[0].pid_name;
    }else{
        ElMessage.error(shengData.message)
    }
}
//3.5 初始化的时候先获取一下城市列表
if(cityId.value != undefined){
    getCityList(cityId.value);
}
//3.6 选择城市
const chooseCity = (id) => {
    chooseCityId.value = id;
    router.replace({
        path: route.path,
        query: { 
            ...route.query, 
            select: id
        }
    })
}
//3.选择商品所在地 end ---------------------------------------->

//4.搜索 start ---------------------------------------->
//4.1 选择一个子导航
const selectSecond = (item) => {
    //高亮显示当前选中的子导航
    selectedSecondId.value = item.category_id
    //带着catid，cityid，select跳转（如果有）
    router.push({
        path: `/xiangcunshangcheng/${targetSegment}/${item.aLIas_pinyin}/index.html`,
        //query: { ...route.query, catid: item.category_id }
    })
}

//4.2 页面展示的数据
const pageDataType1 = ref([]);//供应数据
const pageDataType2 = ref([]);//求购数据

//4.3 发起搜索
const pageSearch = async () => {
    let params = {
        catid:"",//栏目id
        city_id:"",//城市id
        keyword:"",//搜索关键词 - 该页不需要
        page:1,
        pageSize:3,
        //type_id:1//1:供应 2:求购
    }

    if(selectedSecondId.value == undefined){
        params.catid = articleId
    }else{
        params.catid = parseFloat(selectedSecondId.value)
    }

    let routeCiteId = route.query.select;

    if(routeCiteId != undefined && routeCiteId != ''){
        params.city_id = parseFloat(routeCiteId)
    }else{
        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
            //删除变量params中的city_id参数
            delete params.city_id
        }else{
            params.city_id = parseFloat(cityId.value)
        }
    }

    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
        method: 'GET',
        query: params,
    });

    if (pageData.code == 200) {
        pageDataType1.value = pageData.data.type1;
        pageDataType2.value = pageData.data.type2;
    } else {
        console.log("错误位置：获得该页面数据失败！")
    }
    //开始请求数据
    // console.log(params)
    // console.log(pageData)
}
//页面初始化的时候调用一下搜索
pageSearch();

//4.4 每次路由一变化就重新请求数据
//4.4.1 监听cityid
watch(() => route.query.cityid, (newVal, oldVal) => {
    if(newVal != undefined){
        cityId.value = parseFloat(newVal)
        getCityList(newVal)
    }else{
        cityList.value = []
    }
    pageSearch()
})
//4.4.2 监听catid
// watch(() => route.query.catid, (newVal, oldVal) => {
//     pageSearch()
// })
//4.4.3 监听select
//如果路由中存在select参数就忽略cityid
watch(() => route.query.select, (newVal, oldVal) => {
    if(newVal != undefined){
        pageSearch()
    }else{
        chooseCityId.value = '';
        pageSearch()
    }
})
//4.搜索 end ---------------------------------------->

//5.广告 start ---------------------------------------->
//获得所有广告
let adImg1 = ref({})
onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //从客户端启动广告
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
})
//5.广告 end ---------------------------------------->


//6.跳转到列表页 start ---------------------------------------->
const pageShopList = (type) => {
    const { cityid, select } = route.query

    const queryParams = {
        ...(cityid && { cityid }),
        ...(select && { select })
    }

    if(type == 1){
        //type==1 跳转到供应列表页
        const targetPath = `/xiangcunshangcheng/${targetSegment}/gongying/list-1.html`
        router.push({
            path: targetPath,
            query: queryParams
        })
    }else{
        //type==2 跳转到求购列表页
        const targetPath = `/xiangcunshangcheng/${targetSegment}/qiugou/list-1.html`
        router.push({
            path: targetPath,
            query: queryParams
        })
    }
}
//6.跳转到列表页 end ---------------------------------------->
 
//7.设置seo信息 start---------------------------------------->
//7.1 设置seo信息
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': articleId
    },
});

if (setData.code == 200) {
    let seoTitle = setData.data.seo_title;
    let seoDescription = setData.data.seo_description;
    let seoKeywords = setData.data.seo_keywords;
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;

    useSeoMeta({
        title: seoTitle + "_" + seoName + "_" + seoSuffix,
        meta: [
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'viewport', content:"width=device-width,initial-scale=1,user-scalable=no"}

        ]
    });
} else {
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    // console.log("错误位置：设置列表页面SEO数据")
    // console.log("后端错误反馈：", setData.message)
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//7.设置seo信息 end---------------------------------------->
</script>

<style lang="less" scoped>
@import '@/assets/css/shop/class.less';
</style>


<style lang="less" scoped>


 
    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/
            .index_main{width:100%;margin:0px auto;}
  
            .breadcrumb_box{
            

                    height:22px;width:100%;margin:10px auto;
                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                    width:92%;
                    font-size:14px;
                    color:#666;  
                    
                    *{
                        font-size:14px;
                        
                        display:inline ;
                        color:#666;  
                        line-height:22px;height:22px;
                        margin-right:5px;
                    }

                }

                .categ_crumb_right{width:92%;margin:0px auto 11px;float:none;display:none;}
                .categ_crumb_panel{width:92%;left:4%;}
                .categ_grey_box{width:92%;margin:10px auto;display:none;}
            
                .categ_1_index{margin:0px auto;width:92%;}
                .categ_head_box{padding-bottom:10px;}
                .categ_head_box .categ_head_a{font-size:16px;}
                .categ_head_box .categ_head_a_more{font-size:12px;}                 



                .categ_table_li{
                    height:auto;padding:10px 0px;overflow:hidden;
                     
 

                    a{display:block;overflow:hidden;}
                    .categ_table_td_1{height:33vw;width:33vw;margin-right:0px; } 
                    .categ_table_td_1_img{width:100%;height:100%;}
                    .search_table_td_2{width:55vw; margin-right:0;float:right;height:auto;}
                    .search_table_td_2_in{width:100%;display:block;vertical-align:top;height:auto;}
                    .search_table_td_2_head{width:100%;margin-top:8px;}
                    .search_table_td_2_dot2{width:100%;margin-bottom:8px;-webkit-line-clamp:1;height:18px;}
                    .search_table_td_2_dot3{width:100%;-webkit-line-clamp:1;}

                    .categ_table_td_3{
                            float:left;text-align:right;width:auto;line-height:22px;height:22px;margin:0 4vw;font-size:14px;
                            border:solid 1px #E9E9E9;
                            padding:0px 4px;        
                        }
                    .categ_table_td_4{
                            padding:0px 4px;        
                            border:solid 1px #E9E9E9;
                        height:22px;line-height:22px;float:left;text-align:right;width:auto;font-size:14px; 
                    }

                }
                .categ_crumb_box{padding:0;margin:0;}        

                .phone_categ_crumb_out{
                     
                    width:92%;margin:0px auto 8px;position:relative;
                }

                .categ_crumb_city{
 
                        float:left; 
                         padding:0px 10px;border-radius:8px;
                        background:rgba(160,28,14,.1);
                        
                        .categ_crumb_right_text{float: left;
                            height: 21px;
                            line-height: 21px;
                            color: #333;margin-right:4px;
                            font-size: 14px;
                        }

                        .categ_crumb_right_btn{
                            float: left;
                            height: 11px;width:11px;
                            margin:4px 0px 0px 5px;
                             
                               background-image:url(../../../public/image/9.png);                           
                        }
                        .categ_crumb_right_btn_pull{
                             background-image:url(../../../public/image/10.png);                           
                        }

                        .phone_categ_crumb_city_panel{
                            position:absolute;top:122%;right:0px; 
                             border:solid 1px #A01C0E;background:#fff;
                            width:100%;overflow:auto;height:440px;z-index: 111;
                        }
                        .phone_categ_crumb_city_panel_span{
                            display:block;padding:6px 4px;
                            color:#333;font-size:14px;line-height:18px;
                        }
                        .phone_categ_crumb_city_panel_span_only{
                             
                            color:#A01C0E;font-weight:bold;
                        }


                }   

                .phone_categ_crumb_zone{
                       margin-left:8px;float:right;
                        padding:0px 10px;border-radius:8px;
                        background:rgba(160,28,14,.1);
                        
                        .phone_categ_crumb_zone_text{
                            float:left;line-height:21px;height:21px;color:#333;font-size:14px;

                        }
                    .phone_categ_crumb_zone_btn{
                        float:right;
                        height:11px;width:11px;
                        margin:4px 0px 0px 5px;
                         
                           background-image:url(../../../public/image/9.png);                           
                    }
                    .phone_categ_crumb_zone_btn_pull{
                           background-image:url(../../../public/image/10.png);                           
                    }
                     

                        .phone_categ_crumb_zone_panel{
                            position:absolute;top:122%;right:0px;
                            border:solid 1px #A01C0E;
                             background:#fff;z-index: 111;
                            width:100%;height:440px;overflow:auto;


                        }
                        .phone_categ_crumb_zone_panel_span{
                            display:block;padding:6px 4px;
                            color:#333;font-size:14px;line-height:18px;
                        }

                        .phone_categ_crumb_zone_panel_span_only{
                            font-weight:bold;color:#A01C0E;
                        }

                }

                .phone_categ_crumb_out::after{content: '';display: block;height: 0;visibility: hidden;clear: both;}

                .pc_categ_crumb_panel_none{    display:none!important; }
                .categ_table_head_box{display:none;}
                .phone_none{display:none;}
    }

</style>